<template>
	<view>
		<!-- 加了fixed -->
		<view class="page_header">
			<view class="status-bar"></view>
			<view class="navtop">
				<image @click="back" src="/static/index/Back_icon.png" mode="widthFix" class="back_icon"></image>
				<text class="balancea">任务发布(2/2)</text>
				<!-- 右边自定义图片 -->
				<view class="more">
					<text class="jia">?</text>
				</view>
			</view>
		</view>
		<!-- 没加fixed -->
		<view class="status-bar"></view>
		<view class="" style="height: 100rpx ;"></view>
		<view class="main">
			<view class="entryBox">
				<text class="frame"></text>
				<text class="entryName">投放单价<text class="symbol">*</text> </text>
			</view>
			<view class="dataSubmissionbox">
				<input class="inputphone" type="text" placeholder="最低￥1.2元" />
			</view>
			<view class="entryBox">
				<text class="frame"></text>
				<text class="entryName">投放数量<text class="symbol">*</text> </text>
			</view>
			<view class="dataSubmissionbox">
				<input class="inputphone" type="text" placeholder="最低10个起" />
			</view>
			<view class="entryBox">
				<text class="frame"></text>
				<text class="entryName">支付凭证<text class="symbol">*</text> </text>
			</view>
			<view class="dataSubmissionbox">
				<input class="inputphone" type="text" placeholder="不可低于1凭证" />
			</view>
			<view class="entryBox">
				<text class="frame"></text>
				<text class="entryName">结束时间<text class="symbol">*</text> </text>
			</view>
			<view class="numBox">
				<text class="numFont">数量完成自动结束</text>
				<image class="goImg" src="../../../static/user2/rightjt.png"></image>
			</view>
			<view class="entryBox">
				<text class="frame"></text>
				<text class="entryName">提交限时<text class="symbol">*</text> </text>
			</view>
			<view class="numBox">
				<text class="numFont">请选择</text>
				<image class="goImg" src="../../../static/user2/rightjt.png"></image>
			</view>
			<view class="entryBox">
				<text class="frame"></text>
				<text class="entryName">审核周期<text class="symbol">*</text> </text>
			</view>
			<view class="numBox">
				<text class="numFont">请选择</text>
				<image class="goImg" src="../../../static/user2/rightjt.png"></image>
			</view>
			<view class="agreeBox">
				<checkbox style="transform: scale(0.65);"></checkbox>
				<text class="agreeFont">已阅读并同意遵守 <text class="rule">发布规则</text> </text>
				<view @click="open" class="previewBox">
					预览任务
				</view>
			</view>
			<view class="totalBox">
				<text class="total">总计: <text class="pznum">0.00 <text class="pzFont">凭证</text></text> </text>
				<view class="submit">
					提交订单
				</view>
			</view>
		</view>
		<view v-show="isShow" class="mask">
			<view class="popupBox">
				<view class="headBox">
					<image class="taskimg" src="../../../static/user2/task.png"></image>
				</view>
				<view class="taskBox">
					<text class="taskName">{{taskName}}</text>
					<text class="biaoqiana">{{biaoqiana}}</text>
					<text class="biaoqianb">{{biaoqianb}}</text>
					<view class="pzBox">
						<image class="pzimga" src="../../../static/dating/pingzheng.png"></image>
						<text class="pznuma">{{pzNum}}凭证</text>
					</view>
					<text class="commissionfont">佣金:<text class="commissionnum">￥{{commission}}</text> </text>
				</view>
				<view class="personalInfo">
					<view class="head_personInfobox">
						<view>
							<image class="numberImg" src="../../../static/dating/shulaing.png"></image>
							<text class="number">数量{{number}}</text>
						</view>
						<view>
							<image class="surplusImg" src="../../../static/dating/text.png"></image>
							<text class="surplus">剩余{{surplus}}</text>
						</view>
						<view>
							<image class="numberaImg" src="../../../static/dating/number.png"></image>
							<text class="numbera">编号{{numbera}}</text>
						</view>
						<view>
							<image class="timeImg" src="../../../static/task/bianhao3.png"></image>
							<text class="time">{{time}}小时到账</text>
						</view>
					</view>
					<image class="photo" :src="photo"></image>
					<text class="myName">{{myName}}</text>
					<view class="shiming">
						{{shiming}}
					</view>
					<image class="vip" src="../../../static/task/vip_yellow.png"></image>
					<image class="lianxi" src="../../../static/task/lianxi.png"></image>
					<text class="lianxiFont">联系商家</text>
				</view>
				<view class="task_content_box">
					<view class="task_content_box_top">任务步骤</view>
					<view class="task_content_box_lr">
						<view class="task_content_box_left">
							<image src="/static/task/shuxian.png" mode="widthFix" style="width: 40rpx;height: 962rpx;"></image>
						</view>
						<view class="task_content_box_right">
							<view class="task_content_box_right_list">
								<view class="task_content_box_right_list_top">
									步骤一（图文说明）

								</view>
								<view class="task_content_box_right_list_txt">
									6月15日下午17时30时,首次载人交会对接任务的航天员与记者见面会在酒泉驻地问天阁会见厅举行。神舟九号航天员乘组三名成员正式亮相,并回答中外记者提问。 三位航天员工。
								</view>
								<image src="../../../static/dating/public.png" mode="" class="task_content_box_right_list_pic"></image>
							</view>
							<view class="task_content_box_right_list">
								<view class="task_content_box_right_list_top">
									步骤二（图文说明）

								</view>
								<view class="task_content_box_right_list_txt">
									6月15日下午17时30时,首次载人交会对接任务的航天员与记者见面会在酒泉驻地问天阁会见厅举行。神舟九号航天员乘组三名成员正式亮相,并回答中外记者提问。 三位航天员工。
								</view>
								<image src="../../../static/dating/public.png" mode="" class="task_content_box_right_list_pic"></image>
							</view>
							<view class="task_content_box_right_list">
								<view class="task_content_box_right_list_top">
									步骤三（提交截图）
								</view>
								<view class="task_content_box_right_list_txt">
									6月15日下午17时30时,首次载人交会对接任务的航天员与记者见面会在酒泉驻地问天阁会见厅举行。神舟九号航天员乘组三名成员正式亮相,并回答中外记者提问。 三位航天员工。
								</view>
								<view class="" style="display: flex;justify-content: space-between;padding: 0 50rpx;">

									<image src="/static/dating/public.png" mode="" class="pic_task_content_box_right_list"></image>
									<image src="/static/task/undown.png" mode="" class="pic_task_content_box_right_list"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="submitData_Box">
					<text class="submitFont">提交数据<text class="data">(请在下方填写任务数据)</text></text>
				    <input class="inputPhone" type="text" placeholder="手机号" />
				</view>
				<view @click="close" class="endBox">
					结束预览
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				taskName: '任务名称',
				pzNum: '100',
				biaoqiana: '下载注册',
				biaoqianb: '王者荣耀',
				commission: '6.80',
				number: '1080',
				surplus: '809',
				numbera: '202003200001',
				time: '24',
				photo: '../../../static/user/photo.png',
				myName: '鱼书',
				shiming: '已实名',
				isShow:false,
			};
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			open(){
				this.isShow=true;
			},
			close(){
				this.isShow=false;
			}
		}
	}
</script>

<style lang="scss">
	.balancea {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		top: 26rpx;
		left: 280rpx;
	}

	.more {
		width: 36rpx;
		height: 36rpx;
		border: 1rpx solid #333333;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #7322D8;
		font-weight: bold;
		position: absolute;
		right: 65rpx;
	}

	.jia {
		position: relative;
		top: -2rpx;
	}

	.main {
		width: 750rpx;
	}

	.entryBox {
		width: 710rpx;
		height: 90rpx;
		position: relative;
		left: 20rpx;
		display: flex;
		align-items: center;
	}

	.frame {
		display: block;
		width: 10rpx;
		height: 30rpx;
		background: rgba(115, 34, 216, 1);
		border-radius: 5rpx;
	}

	.entryName {
		font-size: 28rpx;
		color: #333333;
		position: relative;
		left: 15rpx;
	}

	.symbol {
		font-size: 28rpx;
		color: #7322D8;
	}

	.dataSubmissionbox {
		width: 710rpx;
		height: 100rpx;
		position: relative;
		left: 20rpx;
		display: flex;
		align-items: center;
	}

	.inputphone {
		font-size: 28rpx;
		position: absolute;
		left: 21rpx;
	}

	.numBox {
		width: 710rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
		position: relative;
		left: 20rpx;
		display: flex;
		align-items: center;
	}

	.numFont {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: absolute;
		left: 20rpx;
	}

	.goImg {
		width: 14rpx;
		height: 22rpx;
		position: absolute;
		right: 22rpx;
	}

	.agreeBox {
		width: 710rpx;
		height: 124rpx;
		position: relative;
		left: 20rpx;
		display: flex;
		align-items: center;
	}

	.agreeFont {
		font-size: 28rpx;
		color: #333333;
	}

	.rule {
		font-size: 28rpx;
		color: #7322D8;
	}

	.previewBox {
		width: 120rpx;
		height: 50rpx;
		border: 2rpx solid rgba(115, 34, 216, 1);
		border-radius: 25rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(115, 34, 216, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 10rpx;
	}

	.totalBox {
		width: 750rpx;
		height: 120rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx -6rpx 18rpx 2rpx rgba(115, 34, 216, 0.1);
		display: flex;
		align-items: center;
	}

	.total {
		font-size: 36rpx;
		color: #333333;
		position: absolute;
		left: 31rpx;
	}

	.pznum {
		font-size: 36rpx;
		color: #FF3B30;
		margin-left: 20rpx;
	}

	.pzFont {
		font-size: 28rpx;
		color: #FF3B30;
	}

	.submit {
		width: 180rpx;
		height: 70rpx;
		background: rgba(115, 34, 216, 1);
		border-radius: 14rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		position: absolute;
		right: 30rpx;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99;
		display: flex;
		justify-content: center;
		overflow-x: scroll;
	}

	.popupBox {
		width: 650rpx;
		height: 2210rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin-top: 217rpx;
		margin-bottom: 30rpx;
		position: relative;
	}

	.headBox {
		width: 650rpx;
		height: 115rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.taskimg {
		width: 430rpx;
		height: 45rpx;
	}

	.taskBox {
		width: 590rpx;
		height: 155rpx;
		position: relative;
		left: 30rpx;
	}

	.taskName {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		top: 25rpx;
	}

	.biaoqiana {
		width: 80rpx;
		height: 27rpx;
		background: rgba(115, 34, 216, 1);
		opacity: 0.3;
		border-radius: 4rpx;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 72rpx;
	}

	.biaoqianb {
		width: 80rpx;
		height: 27rpx;
		background: rgba(115, 34, 216, 1);
		opacity: 0.3;
		border-radius: 4rpx;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 72rpx;
		left: 85rpx;
	}

	.pzBox {
		width: 250rpx;
		height: 40rpx;
		position: absolute;
		top: 25rpx;
		right: 0rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.pzimga {
		width: 25rpx;
		height: 27rpx;
	}

	.pznuma {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-left: 10rpx;
	}

	.commissionfont {
		font-size: 24rpx;
		color: #7322D8;
		position: absolute;
		right: 0rpx;
		bottom: 25rpx;
	}

	.commissionnum {
		font-size: 28rpx;
		color: #FF3B30;
		margin-left: 10rpx;
	}

	.personalInfo {
		width: 590rpx;
		height: 170rpx;
		// border: 1rpx solid red;
		position: relative;
		left: 30rpx;
	}

	.head_personInfobox {
		width: 590rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.numberImg {
		width: 24rpx;
		height: 24rpx;
	}

	.number {
		font-size: 19rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: relative;
		top: -5rpx;
		left: 8rpx;
	}

	.surplusImg {
		width: 23rpx;
		height: 23rpx;
	}

	.surplus {
		font-size: 19rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: relative;
		top: -5rpx;
		left: 8rpx;
	}

	.numberaImg {
		width: 27rpx;
		height: 21rpx;
	}

	.numbera {
		font-size: 19rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: relative;
		top: -5rpx;
		left: 8rpx;
	}

	.timeImg {
		width: 24rpx;
		height: 24rpx;
	}

	.time {
		font-size: 19rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: relative;
		top: -5rpx;
		left: 8rpx;
	}

	.photo {
		width: 73rpx;
		height: 73rpx;
		position: absolute;
		bottom: 18rpx;

	}

	.myName {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		bottom: 62rpx;
		left: 88rpx;
	}

	.shiming {
		width: 73rpx;
		height: 27rpx;
		background: rgba(115, 34, 216, 1);
		border-radius: 12rpx;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(240, 240, 240, 1);
		position: absolute;
		bottom: 21rpx;
		left: 87rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.vip {
		width: 112rpx;
		height: 27rpx;
		position: absolute;
		bottom: 21rpx;
		left: 169rpx;
	}

	.lianxi {
		width: 39rpx;
		height: 35rpx;
		position: absolute;
		bottom: 50rpx;
		right: 30rpx;
	}

	.lianxiFont {
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: absolute;
		bottom: 15rpx;
		right: 0rpx;
	}

	.task_content_box {
		width: 590rpx;
		height: 1450rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		padding-left: 20rpx;
		padding-right: 36rpx;
		box-sizing: border-box;
		padding-top: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
		top: 17rpx;
		left: 30rpx;

		.task_content_box_top {
			font-size: 35rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			margin-bottom: 20rpx;
		}

		.task_content_box_lr {
			display: flex;

			.task_content_box_right {
				margin-left: 13rpx;
			}

		}
	}

	.task_content_box_right_list {
		height: 420rpx;
		margin-bottom: 24rpx;

		.task_content_box_right_list_top {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}

		.task_content_box_right_list_txt {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			height: 150rpx;
			margin-top: 15rpx;
		}

		.task_content_box_right_list_pic {
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
			margin-top: 21rpx;
			margin-left: 145rpx;
		}
	}

	.pic_task_content_box_right_list {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		margin-top: 21rpx;
	}
	.submitData_Box{
		width: 590rpx;
		height: 137rpx;
		margin-top: 35rpx;
		margin-left: 30rpx;
	}
	.submitFont{
		font-size: 26rpx;
		color: #333333;
		margin-left: 18rpx;
	}
	.data{
		font-size: 26rpx;
		color: #8E8E8E;
		margin-left: 10rpx;
	}
	.inputPhone{
		width:537rpx;
		height:43rpx;
		background:rgba(229,229,229,1);
		border-radius:10rpx;
		font-size:20rpx;
		padding-left: 17rpx;
		margin-left: 18rpx;
		margin-top: 22rpx;
		}
		.endBox{
			width:590rpx;
			height:90rpx;
			background:rgba(115,34,216,1);
			box-shadow:0rpx 0rpx 18rpx 2rpx rgba(115,34,216,0.3);
			border-radius:20rpx;
			font-size:36rpx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(255,255,255,1);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 38rpx;
			margin-left: 30rpx;
			}
</style>
